<template>
    <div class="relative drawer-all">
        <div class="h-drawer table h-full">
            <div class="center-table" style='width:80px' @click="drawer_change">
                <span class="iconfont icon-toggle-left" :class='[isdrawer?"icon-toggle-right":"icon-toggle-left"]' style="font-size: 22px;"></span>
            </div>
        </div>
        <div :class="maskClass" class="drawer-wrap" ref="wrap_manu">
            <div :class="maskClass" class="drawer-mask" @click="isdrawer = false"></div>
            <div :class="mainClass" class="drawer-manu"  :style="mainStyle">
                <div class="drawer-logo">
                    <img src="@assets/logo/logo.png" alt="" class="w-full h-full">
                </div>
                <div>
                    <div class="manu table cursor-pointer" v-for="item in 4">
                        <div class="center-table">
                            <span>菜单管理</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { log } from 'console'
import { ref,reactive,toRefs,defineComponent,computed,getCurrentInstance} from 'vue'
export default defineComponent({
    name:'z-drawer',
    props: {
        // 标题
        title: {
            type: String,
            default: '标题'
        },
        // 是否显示关闭按钮
        closable: {
            type: Boolean,
            default: true
        },
        // 是否显示遮罩
        mask: {
            type: Boolean,
            default: true
        },
        // 是否点击遮罩关闭
        maskClosable: {
            type: Boolean,
            default: true
        },
        // 宽度
        width: {
            type: String,
            default: '10.5rem'
        },
        // 是否在父级元素中打开
        inner: {
            type: Boolean,
            default: false
        }
    },
    setup: (props)=>{
        const { proxy } = getCurrentInstance() as any;
        let data = reactive({
            isdrawer:false,

        })
        const maskClass = computed(()=>{
            return {
                'mask-show': (props.mask && data.isdrawer),
                'mask-hide': !(props.mask && data.isdrawer),
                'inner': props.inner
            }
        })
        const mainClass = computed(()=>{
            return {
                'main-show': data.isdrawer,
                'main-hide': !data.isdrawer,
                'inner': props.inner
            }
        })
        const mainStyle = computed(()=>{
            return {
                width: props.width,
                left: data.isdrawer ? '0' : `-${props.width}`,
                borderLeft: props.mask ? 'none' : '1px solid #eee'
            }
        })
        
        const drawer_change = ()=>{
            data.isdrawer = !data.isdrawer
            console.log(data.isdrawer);
        }
        return {
           ...toRefs(data),
           drawer_change,
           maskClass,
           mainClass,
           mainStyle
        }
    }
})
</script>
<style lang="scss" scoped>
.layout-fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.drawer-all{
    display: none;
    height: 100%;
    width: 3.125rem;
    .h-drawer{
        position: absolute;
        z-index: 20;
    }
    .drawer-wrap{
        @extend .layout-fixed;
        z-index: 50;
        .drawer-mask{
            background: rgba($color: #000000d7, $alpha: 0.3);
        }
        .drawer-manu{
            position: absolute;
            z-index: 50;
            height: 100%;
            background: white;
            box-shadow: 1px 0px 12px rgba($color: #000000, $alpha: 0.1);
            transition: all 0.5s ease-in-out;
            .drawer-logo{
                margin: auto;
                width: 90%;
                height: 3rem;
            }
            .manu{
                padding:20px 0;
                width: 100%;
                height: 3.125rem;
                font-weight: 400;
                font-size: 18px;
                letter-spacing: 8px;
                &:not(:last-child){
                    border-bottom: 1px rgba($color: #000000, $alpha: 0.1) solid;
                }
                &:hover{
                    background: rgba($color: #000000, $alpha: 0.2);
                }
            }
        }
    }

}

//
.mask-show {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  background-color: rgba(0,0,0,.5);
  opacity: 1;
  transition: opacity .5s;
 }
 .mask-hide {
  opacity: 0;
  transition: opacity .5s;
  z-index: 0 !important;
 }
 .main-show {
  opacity: 1;
 }
 .main-hide {
  opacity: 0;
 }
</style>